<template>
    <el-row :gutter="20">
        <el-col :span="17">
            <el-card>
                <div class="title">
                    <h3 class="mr">今日设备运行状态</h3>
                    <p>更新时间:2025年09月23日</p>
                    <el-icon color="#86909c">
                        <RefreshLeft />
                    </el-icon>
                </div>
                <div class="equipment">
                    <div class="item mt">
                        <h4>充电桩使用率</h4>
                        <img :src="flash" alt="">
                        <h1>2263/3398</h1>
                        <div class="statistic-card">
                            <el-statistic :value="135">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        异常设备
                                        <el-tooltip effect="dark"
                                            content="Number of users who logged into the product in one day"
                                            placement="top">
                                            <el-icon style="margin-left: 4px" :size="12">
                                                <Warning />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                            <div class="statistic-footer">
                                <div class="footer-item">
                                    <span>相较</span>
                                    <span class="green">
                                        24%
                                        <el-icon color="green">
                                            <CaretTop />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item mt">
                        <h4>充电桩使用率</h4>
                        <img :src="flash1" alt="">
                        <h1>655/1233</h1>
                        <div class="statistic-card">
                            <el-statistic :value="56">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        异常设备
                                        <el-tooltip effect="dark"
                                            content="Number of users who logged into the product in one day"
                                            placement="top">
                                            <el-icon style="margin-left: 4px" :size="12">
                                                <Warning />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                            <div class="statistic-footer">
                                <div class="footer-item">
                                    <span>相较昨日</span>
                                    <span class="green">
                                        24%
                                        <el-icon color="green">
                                            <CaretTop />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item mt">
                        <h4>充电桩使用率</h4>
                        <img :src="flash2" alt="">
                        <h1>72/95</h1>
                        <div class="statistic-card">
                            <el-statistic :value="9">
                                <template #title>
                                    <div style="display: inline-flex; align-items: center">
                                        异常设备
                                        <el-tooltip effect="dark"
                                            content="Number of users who logged into the product in one day"
                                            placement="top">
                                            <el-icon style="margin-left: 4px" :size="12">
                                                <Warning />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-statistic>
                            <div class="statistic-footer">
                                <div class="footer-item">
                                    <span>相较昨日</span>
                                    <span class="green">
                                        24%
                                        <el-icon color="green">
                                            <CaretTop />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card class="mt">
                <template #header>
                    <div class="card-header">
                        <h4>常用功能</h4>
                    </div>
                </template>
                <div class="quick">
                    <el-row>
                        <el-col :span="4">
                            <img :src="repair" alt="">
                            <p>设备维修</p>
                        </el-col>
                        <el-col :span="4">
                            <img :src="progress" alt="">
                            <p>详细咨询</p>
                        </el-col>
                        <el-col :span="4">
                            <img :src="remain" alt="">
                            <p>维护管理</p>
                        </el-col>
                        <el-col :span="4">
                            <img :src="total" alt="">
                            <p>详细图表</p>
                        </el-col>
                        <el-col :span="4">
                            <img :src="money" alt="">
                            <p>财务管理</p>
                        </el-col>
                        <el-col :span="4">
                            <img :src="daily" alt="">
                            <p>电量管理</p>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <el-card class="mt">
                <template #header>
                    <div class="card-header">
                        <h4>能源统计</h4>
                    </div>
                </template>
                <el-row>
                    <el-col :span="8">
                        <div ref="pieChart" style="width: 100%;height: 480px;"></div>
                    </el-col>
                    <el-col :span="16">
                        <div ref="lineChart" style="width: 100%;height: 480px;"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="7">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <h4>设备总览</h4>
                    </div>
                </template>
                <div ref="radarChart" style="height: 200px;width: 100%;"></div>
            </el-card>
            <el-card class="mt">
                <template #header>
                    <div class="card-header">
                        <h4>营收统计表</h4>
                    </div>
                </template>
                <ul class="ranking-list">
                    <li class="rank-item" v-for="item in RankList" :key="item.id">
                        <span :class="sortColor(item.id)">{{ item.id }}</span>
                        <span class="store-name">{{ item.areaName }}</span>
                        <span class="scales">{{ item.salary }}</span>
                        <span class="percent">
                            {{ item.percent }}
                            <el-icon color="green">
                                <CaretTop />
                            </el-icon>
                        </span>
                    </li>
                </ul>
            </el-card>
            <el-card class="mt">
                <template #header>
                    <div class="card-header">
                        <h4>故障报警</h4>
                    </div>
                </template>
                <el-timeline style="max-width: 600px" >
                    <el-timeline-item timestamp="2025/9/23" placement="top" type='success' hollow>
                        <el-card>
                            <p>矿业北路通讯中断</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2025/9/22" placement="top" type='danger' hollow>
                        <el-card>
                            <p>黄河南路超出服务器区域</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2025/9/22" placement="top" type='success' hollow>
                        <el-card>
                            <p>6号机组异常断电</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-card>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
import flash from '@/assets/flash.png'
import flash1 from '@/assets/flash2.png'
import flash2 from '@/assets/flash3.png'
import repair from '@/assets/repair.png'
import progress from '@/assets/progress.png'
import remain from '@/assets/remain.png'
import total from '@/assets/total.png'
import money from '@/assets/money.png'
import daily from '@/assets/daily.png'
import { reactive, ref, onMounted } from 'vue'
import { getLineChartAPI, getDadarChartAPI, getPieChartAPI } from '@/api/echart'
import { getRankListAPI } from '@/api/layout'
import { UserChart } from '@/hook/useChart'


const pieChart = ref(null)
const lineChart = ref(null)
const radarChart = ref(null)


const setLineChart = async () => {
    const chartOptions: any = reactive({
        title: {
            text: '电量统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['充电量', '充电时长', '充电功率']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ["13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00"]
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: "{value}kw"
            }
        },
        series: [
            {
                name: '',
                type: 'line',
                data: [],
                lineStyle: {
                    width: 4
                },
                itemStyle: {
                    color: 'purple',
                    shadowBlur: 5,
                    shadowColor: 'rgba(0,255,0,0.5)'
                },
                smooth: true
            },
            {
                name: '',
                type: 'line',
                data: [],
                lineStyle: {
                    width: 4
                },
                itemStyle: {
                    color: 'lightgreen',
                    shadowBlur: 5,
                    shadowColor: 'rgba(0,255,0.5)'
                },
                smooth: true

            },
            {
                name: '',
                type: 'line',
                data: [],
                lineStyle: {
                    width: 4
                },
                itemStyle: {
                    color: 'skyblue',
                    shadowBlur: 5,
                    shadowColor: 'rgba(0,255,0,0.5)'
                },
                smooth: true
            },
        ]
    })
    const res = await getLineChartAPI()
    chartOptions.legend.data = res.data.list.map((item: any) => item.name)
    for (var i = 0; i < res.data.list.length; i++) {
        chartOptions.series[i].name = res.data.list[i].name
        chartOptions.series[i].data = res.data.list[i].data
    }
    return chartOptions
}

const setPieChart = async () => {
    const chartOption: any = reactive({
        title: {
            text: '营收占比', // 你想要显示的文字
            left: '50%',     // 水平居中（相对于图表容器）
            top: '50%',      // 垂直居中（相对于图表容器）
            textAlign: 'center',         // 文字水平对齐方式
            textVerticalAlign: 'middle', // 文字垂直对齐方式
            textStyle: {
                fontSize: 30,  // 文字大小
                color: '#333', // 文字颜色
                fontWeight: 'bold' // 文字加粗（可选）
            }
        },
        legend: {
            top: 'bottom'
        },
        tooltip: {
            trigger: 'item',
            show: 'false'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '营收占比',
                type: 'pie',
                radius: ["50%", "70%"],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: [
                ]
            }
        ]
    })
    const res = await getPieChartAPI()
    chartOption.series[0].data = res.data.list
    return chartOption
}
const setRadarChary = async () => {
    const charOptions: any = reactive({
        legend: {
            data: ['Allocated Budget', 'Actual Spending']
        },
        radar: {
            // shape: 'circle',
            indicator: [
                { name: '闲置数', max: 65 },
                { name: '使用数', max: 160 },
                { name: '故障数', max: 300 },
                { name: '维修数', max: 380 },
                { name: '更换数', max: 520 },
                { name: '报废数', max: 250 }
            ]
        },
        series: [
            {
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                    {
                        value: [4200, 3000, 20000, 35000, 50000, 18000],

                    }
                ]
            }
        ]
    })
    const res = await getDadarChartAPI()
    charOptions.series[0].data[0].value = res.data.list
    return charOptions
}

UserChart(pieChart, setPieChart)
UserChart(lineChart, setLineChart)
UserChart(radarChart, setRadarChary)

interface RankData {
    id: number,
    areaName: string,
    salary: string,
    percent: string
}
const RankList = ref<RankData[]>([])

const rankStyles = reactive<any>({
    1: 'rank-one',
    2: 'rank-second',
    3: 'rank-three'
})
// 动态li颜色
const sortColor = (id: number) => {
    return rankStyles[id] || 'rank-normal'
}

onMounted(async () => {
    const res = await getRankListAPI()
    RankList.value = res.data.list
})
</script>


<style lang="less" scoped>
.title {
    display: flex;
    align-items: center;

    p {
        color: #86909c;
        font-weight: bold;
        text-align: center;
    }
}

.equipment {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item {
        padding: 0px 40px;

        h4 {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        h1 {
            font-size: 28px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .footer-item {
            margin-top: 10px;
            font-size: 14px;
        }
    }

}

.quick {
    padding: 30px 10px;
    text-align: center;

    p {
        margin-top: 10px;
        color: #333333;
    }
}

.ranking-list {
    .rank-item {
        display: flex;
        align-items: center;
        padding: 20px;

        .rank-one {
            height: 30px;
            background-color: #67c23a;
            width: 30px;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius: 50%;
            font-weight: bold;
        }

        .rank-second {
            height: 30px;
            background-color: #409eff;
            width: 30px;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius: 50%;
            font-weight: bold;
        }


        .rank-three {
            height: 30px;
            background-color: #e6a23c;
            width: 30px;
            text-align: center;
            line-height: 30px;
            color: white;
            border-radius: 50%;
            font-weight: bold;
        }

        .rank-normal {
            height: 30px;
            width: 30px;
            text-align: center;
            line-height: 30px;
            color: #666668;
            border-radius: 50%;
            font-weight: bold;
        }


        .store-name {
            flex-grow: 1;
            padding: 0px 10px;
        }

        .scales {
            margin-right: 60px;

        }
    }

    .rank-item:nth-child(2n) {
        background-color: rgb(253, 246, 236);
    }
}
</style>